<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link href="css/bootstrap.min.css?v=3.3.6" th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.4.0" th:href="@{/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
<link href="/css/plugins/toastr/toastr.min.css" rel="stylesheet">
<link href="/css/plugins/bootstrap-table/bootstrap-table.min.css" th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
<link rel="stylesheet" href="/css/approval/box.css">
<link rel="stylesheet" href="/css/plugins/jQueryUI/jquery-ui.css"/>
<link rel="stylesheet" href="/css/approval/tableCheckboxStyle.css">
<link rel="stylesheet" type="text/css" href="/css/plugins/easyui/easyui.css">
<link rel="stylesheet" type="text/css" href="/css/plugins/easyui/icon.css">
<link rel="stylesheet" type="text/css" href="/css/approval/public.css"/>
<link rel="stylesheet" type="text/css" href="/css/approval/create.css"/>
</head>
<body>
	<div id="content" class="easyui-layout" data-options="fit:true">
		<div id="westMaster" data-options="region:'west',split:true,border:false,minWidth:330,maxWidth:460" style="width:400px;padding:0">
			<div class="main_toal_box">
				<div class="main_toal_left">
					<div class="main_toal_font">
						Total <span v-cloak>{{total}}</span>
					</div>
				</div>
				<div class="main_search_right">
					<div class="main_search" style="width:150px;">
						<input type="text" name="searchName" id="searchName" placeholder="Search" style="width:120px" autocomplete="off"/><span></span>
					</div>
					<div class="detail_btn" style="width: 60px" id="deleteLine">Delete</div>
					<div class="detail_btn" style="width: 60px" id="addNewLine">Add</div>
				</div>
			</div>
			<table id="dataTable" data-mobile-responsive="true" ></table>
		</div>
		<div id="centerDetail" data-options="region:'center',border:false">
			<div class="detailTop" style="height: 52px">
				<div id="selected" style="padding: 10px 0 0 17px;">
					<div class="main_font_right">
						<button id="collapseBtn" title="Expand view window"><i class='fa fa-arrow-left'></i><i class='fa fa-arrow-right hidden'></i></button>
						<button >Add new approval line</button>
						<button style="display: inline-block" id="saveCurrentLine">Save</button>
					</div>
				</div>
			</div>

			<div class="detailBody" style="padding: 8px;height: calc(100% - 52px);">
				<div id="detailInfo">
					<span id="lineIdSpan" style="display:none;"></span>
				</div>
				<div class="title_main_body" style="border: 0px;width: 100%;margin: 0px">
					<input class="set_right_title" type="text"  value="" placeholder="Please enter line name"/>
					<div class="save_search_body">
						<div class="save_search" style="width:calc(100% - 100px)">
							<input type="text" name="" id="userInput" value=""  placeholder="Please enter approver by using the Instant Search or Add User icon." /><span></span>
						</div>
						<div class="save_right">
							<div class="save_per" style="margin-right:0px">
								<img src="/img/approval/person_icon.png" />
							</div>
							<div class="tip">TIP</div>
						</div>
					</div>
					<div class="save_line_body">
						<div class="save_ul_body">
							<ul>
								<li id="RoleChangeBtn" >
									<span class="icon_button" id="ApprRoleBtn" title="Approval">Appr<!--oval--></span>
									<span class="icon_button" id="ConsRoleBtn" title="Consent">Cons<!--ent--></span>
									<span class="icon_button" id="NotiRoleBtn" title="Notification">Noti<!--fication--></span>
								</li>
								<li id='PostRoleBtn'>Post approval</li>
								<li>
									<span class="par" id='ParRoleBtn'><i></i> Parallel</span>
									<span class="cancel" id='CancelParBtn'><i></i>Cancel parallel</span>
								</li>
								<li class="moveAppr">
									<span class="top_arrow" id="top_arrow" title="Up"></span>
									<span class="bottom_arrow" id="bottom_arrow" title="Down"></span>
									<span id="deleteApp"><i class="fa fa-times" aria-hidden="true"></i></span>
								</li>
								<li>Total <span v-cloak>{{totalLines}}</span></li>
							</ul>
						</div>
						<div class="save_line_info">
							<ul id="userList">
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- --------------------------------------------------------------->
	<script src="/js/jquery.min.js?v=2.1.4"></script>
	<!-- vue -->
	<script src="/js/vue.min.js"></script>
	<script src="/js/plugins/easyui/jquery.easyui.min.js"></script>
	<script src="/js/jquery-ui.min.js?v=1.12.1"></script>
	<script src="/js/bootstrap.min.js?v=3.3.6"></script>
	<script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
	<script src="/js/plugins/bootstrap-table/locale/bootstrap-table-locale-all.min.js"></script>
	<script src="/js/appjs/oa/webSocket/sockjs.min.js"></script>
	<script src="/js/appjs/oa/webSocket/stomp.min.js"></script>

	<script src="/js/plugins/layer/layer.js"></script>
	<script src="/js/appjs/approval/line.js"></script>
</body>
</html>